<template>
    <view class="bg-content">
        <div style="background-color: white;">
            <u-dropdown ref="uDropdown" :border-bottom="true">
                <u-dropdown-item title="筛选数据">
                    <view class="slot-content">
                        <view style="padding: 15px; background-color: white;">
                            <u-form ref="validateFormRef" :model="validateForm.value" :label-width="150">
                                <u-form-item label="系统分类" prop="storeClassId">
                                    <u-input type="select" :select-open="validateForm.controls.storeClassId.isShow"
                                             v-model="validateForm.controls.storeClassId.textDesc"
                                             placeholder="请选择系统分类" @click="validateForm.controls.storeClassId.isShow = true; $forceUpdate();"></u-input>
                                </u-form-item>
                                <u-form-item label="商品分类" prop="goodsClassId">
                                    <u-input type="select" :select-open="validateForm.controls.goodsClassId.isShow"
                                             v-model="validateForm.controls.goodsClassId.textDesc"
                                             placeholder="请选择商品分类" @click="validateForm.controls.goodsClassId.isShow = true; $forceUpdate();"></u-input>
                                </u-form-item>
                                <u-form-item label="系统编码" prop="sysCode">
                                    <u-input v-model="validateForm.value.sysCode" placeholder="请输入系统编码"/>
                                </u-form-item>
                                <u-form-item label="编码" prop="code">
                                    <u-input v-model="validateForm.value.code" placeholder="请输入编码"/>
                                </u-form-item>
                                <u-form-item label="标题" prop="title">
                                    <u-input v-model="validateForm.value.title" placeholder="请输入标题"/>
                                </u-form-item>
                                <u-form-item label="状态" prop="status">
                                    <u-input type="select" :select-open="validateForm.controls.status.isShow"
                                             v-model="validateForm.controls.status.textDesc"
                                             placeholder="请选择状态" @click="validateForm.controls.status.isShow = true; $forceUpdate();"></u-input>
                                </u-form-item>
                            </u-form>
                            <div style="display: flex;">
                                <div style="width: 100%;">
                                    <u-button type="primary" @click="validateForm.resetValues()">重置过滤条件</u-button>
                                </div>
                                <div style="width: 100%;">
                                    <u-button type="error" @click="validateForm.doSearch(_self, tbGoodsList)">搜索</u-button>
                                </div>
                            </div>
                        </view>
                    </view>
                </u-dropdown-item>
            </u-dropdown>
        </div>

        <u-select mode="mutil-column-auto" label-name="name" value-name="code" :mask-close-able="false" v-if="validateForm.controls.storeClassId.isShow"
                  v-model="validateForm.controls.storeClassId.isShow" :list="validateForm.controls.storeClassId.options"
                  :default-value="validateForm.controls.storeClassId.defaultValue"
                  @cancel="validateForm.controls.storeClassId.isShow = false; $forceUpdate();"
                  @confirm="UFormUtil.selectMutilColumnConfirm($event, validateForm.controls.storeClassId)"></u-select>

        <u-select mode="single-column" label-name="name" value-name="code" :mask-close-able="false" v-if="validateForm.controls.goodsClassId.isShow"
                  v-model="validateForm.controls.goodsClassId.isShow" :list="validateForm.controls.goodsClassId.options"
                  :default-value="validateForm.controls.goodsClassId.defaultValue"
                  @cancel="validateForm.controls.goodsClassId.isShow = false; $forceUpdate();"
                  @confirm="UFormUtil.selectSingleColumnConfirm($event, validateForm.controls.goodsClassId)"></u-select>

        <u-select mode="single-column" label-name="name" value-name="code" :mask-close-able="false" v-if="validateForm.controls.status.isShow"
                  v-model="validateForm.controls.status.isShow" :list="validateForm.controls.status.options"
                  :default-value="validateForm.controls.status.defaultValue"
                  @cancel="validateForm.controls.status.isShow = false; $forceUpdate();"
                  @confirm="UFormUtil.selectSingleColumnConfirm($event, validateForm.controls.status)"></u-select>


        <div style="background-color: white;">
            <u-cell-item :arrow="false" use-label-slot :title-style="{'width': '100%'}" v-for="(item, index) in tbGoodsList" :key="item.id">
                <div slot="icon" @click="navigateTo(`/pages/common/goods-detail/index?id=${item.id}`)">
                    <image style="height: 90px; width: 90px;"
                           :src="item.thumbnailUrl ? item.thumbnailUrl + '?imageView2/1/w/300/h/300' : '/pages/sub/sub2-store-platform/static/default-image/goods.jpg'"></image>
                </div>
                <div slot="title" style="padding-left: 10px;">
                    <div style="min-height: 63px;" @click="navigateTo(`/pages/common/goods-detail/index?id=${item.id}`)">
                        {{item.title}}
                    </div>
                    <div style="display: flex;">
                        <div style="width: 60px;">
                            <u-tag size="mini" type="success" v-if="item.status === '1'" :text="'在售'"></u-tag>
                        </div>
                        <div style="width: 100%;">
                            <div style="text-align: right;">
                                <u-button size="mini" type="default" style="margin-right: 5px" @click.stop.prevent="deleteTbGoodsById(item)">删除</u-button>
                                <u-button size="mini" type="default" style="margin-right: 5px" @click.stop.prevent="updateStatus(item, '0')"
                                          v-if="item.status === '1'">
                                    下架
                                </u-button>
                                <u-button size="mini" type="default" style="margin-right: 5px" @click.stop.prevent="updateStatus(item, '1')"
                                          v-if="item.status === '0'">
                                    上架
                                </u-button>
                                <u-button size="mini" type="default"
                                          @click.stop.prevent="navigateTo2(`/pages/sub/sub2-store-platform/store-platform/store-platform-goods-manage/store-platform-goods/store-platform-goods-edit/index?id=${item.id}`, item)">
                                    编辑
                                </u-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div slot="label">
                </div>
                <div slot="right-icon">
                </div>
                <!--默认value属性-->
                <div>
                </div>
            </u-cell-item>
        </div>

        <div style="padding-top: 10px; padding-bottom: 10px;">
            <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
        </div>

        <div style="padding-bottom: 60px;"></div>

        <div class="custom-bottom-button">
            <label @click="navigateTo2('/pages/sub/sub2-store-platform/store-platform/store-platform-goods-manage/store-platform-goods/store-platform-goods-add/index')">
                添加商品
            </label>
        </div>

    </view>
</template>

<script>

    import {UFormUtil} from "@/dev/core/utils/u-form.util";
    import {SysDictionaryService} from "@/dev/services/sys-dictionary.service";
    import {TbGoodsClassService} from "@/dev/services/tb-goods-class.service";
    import {TbStoreClassService} from "@/dev/services/tb-store-class.service";
    import {CommonUtil} from "@/dev/core/utils/common.util";
    import {TbGoodsService} from "@/dev/services/tb-goods.service";

    export default {
        data() {
            return {
                validateForm: {
                    value: {
                        storeClassId: '',
                        goodsClassId: '',
                        sysCode: '',
                        code: '',
                        title: '',
                        status: '',
                    },
                },
                tbGoodsList: [],
            }
        },
        onShow() {
            const _self = this;
            new TbStoreClassService().findTbStoreClassTree({
                communityId: _self.globalVariable.userInfo.tbStore.communityId,
            }).then(result => {
                UFormUtil.setOptions(_self.validateForm.controls.storeClassId, [{
                    name: '全部',
                    code: '',
                    children: [{name: '', code: ''}]
                }, ...CommonUtil.objectAlias(result[0].children, {'id': 'code'})], 2);
                _self.$forceUpdate();
            });

            new TbGoodsClassService().findTbGoodsClassList({storeId: _self.globalVariable.userInfo.tbStore.id}).then(result => {
                UFormUtil.setOptions(_self.validateForm.controls.goodsClassId, [{code: '', name: '全部'}, ...CommonUtil.objectAlias(result, {'id': 'code'})]);
                _self.$forceUpdate();
            });

            new SysDictionaryService().optionList('tb_goods@status', null).then(result => {
                UFormUtil.setOptions(_self.validateForm.controls.status, [{code: '', name: '全部'}, ...result]);
                _self.$forceUpdate();
            });

            this.doRefresh(this.tbGoodsList);
        },
        // 上拉加载
        onReachBottom: function () {
            if (this.pagination.hasNextPage) {
                this.doInfinite();
            }
        },
        methods: {
            /**
             * 减少网络流量
             */
            navigateTo2(url, item) {
                if (!this.validateForm.controls.storeClassId.options) {
                    CommonUtil.toast("正在获取系统分类数据，请稍后执行...");
                    return;
                }
                if (!this.validateForm.controls.goodsClassId.options) {
                    CommonUtil.toast("正在获取商品分类数据，请稍后执行...");
                    return;
                }
                if (!this.validateForm.controls.status.options) {
                    CommonUtil.toast("正在获取商品状态数据，请稍后执行...");
                    return;
                }
                let storeClassIdOptions = JSON.parse(JSON.stringify(this.validateForm.controls.storeClassId.options));
                storeClassIdOptions.splice(0, 1);
                let goodsClassIdOptions = JSON.parse(JSON.stringify(this.validateForm.controls.goodsClassId.options));
                goodsClassIdOptions.splice(0, 1);
                let statusOptions = JSON.parse(JSON.stringify(this.validateForm.controls.status.options));
                statusOptions.splice(0, 1);
                let data = {
                    storeClassIdOptions: storeClassIdOptions,
                    goodsClassIdOptions: goodsClassIdOptions,
                    statusOptions: statusOptions,
                    tbGoods: item,
                };
                this.navigateTo(url, null, data);
            },
            doInfinite() {
                const _self = this;
                let data = Object.assign({}, this.validateForm.value);
                data.storeId = _self.globalVariable.userInfo.tbStore.id;
                data.deleted = 0;
                data.orderBy = 'create_time desc';

                new TbGoodsService().findTableListByStore({
                    pagination: _self.pagination,
                    data: data
                }).then(result => {
                    _self.pagination.refreshPage(result);
                    _self.tbGoodsList = [..._self.tbGoodsList, ...result.list];
                    _self.$forceUpdate();
                })
            },
            updateStatus(item, status) {
                const _self = this;
                CommonUtil.alert({
                    title: '提示！',
                    content: status === '1' ? '确定上架商品吗？' : '确定下架商品吗？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            new TbGoodsService().updateTbGoods({
                                id: item.id,
                                status: status
                            }).then(result => {
                                item.status = result.status;
                                item.statusText = result.statusText;
                                CommonUtil.toast('操作成功');
                                _self.$forceUpdate();
                            });
                        }
                    }
                });
            },

            deleteTbGoodsById(id) {
                const _self = this;
                CommonUtil.alert({
                    title: '提示！',
                    content: '确定删除该商品吗？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            new TbGoodsService().batchDeleteTbGoodsByIds(id).then(result => {
                                new TbGoodsService().deleteAndSaveGoodsLuceneIndex({id: id}).then();
                                CommonUtil.toast('删除成功');
                                _self.doRefresh(null, _self.tbGoodsList, null);
                            });
                        }
                    }
                });
            }
        },
    }
</script>

<style lang="scss" scoped>
</style>
